import React, { PureComponent } from 'react';
import _ from 'lodash';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Row, Col, Tooltip } from 'antd';
import { QuickQueryC, SecondHeaderC } from '../../../../components';
import AmountAndNumber from './compents/amountAndNumber';
import InAndOutAmount from './compents/InAndOutAmount';
import Top5Statistics from './compents/top5Statistics';

import { connect } from 'dva';

@connect(({ TradeAnalysisNewM }) => ({ TradeAnalysisNewM }))
export default class TradeStatistics extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      loading: false,
      quickQuerytype: 'assetType',
    };
  }

  componentDidMount() {
    const { searchObj } = this.props;
    if (searchObj) {
      const data = { ...searchObj, portfolioCodeList: JSON.stringify(searchObj.portfolioCodeList) };

      this.getData(data);
    }
  }

  componentDidUpdate(prevProps) {
    if (JSON.stringify(this.props.searchObj) !== JSON.stringify(prevProps.searchObj)) {
      const data = { ...this.props.searchObj, portfolioCodeList: JSON.stringify(this.props.searchObj.portfolioCodeList) };

      this.getData(data);
    }
  }

  // 获取数据
  getData = (searchObj) => {
    this.setState({
      loading: true,
    });

    this.props.dispatch({
      type: 'tradeAnalysisNewM/getTradeCount',
      payload: {
        ...searchObj,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            data: { ...data },
          });
        }
        this.setState({ loading: false });
      },
    });
  };

  // 选择图表数据种类
  quickQueryButtom() {
    const dataSource = [
      {
        title: '资产类别',
        value: 'assetType',
      },
      {
        title: '交易市场',
        value: 'tradeMarket',
      },
      {
        title: '交易对手',
        value: 'tradingCompany',
      },
    ];

    return <QuickQueryC dataSource={dataSource} initialValue='assetType' onChange={(e) => this.setState({ quickQuerytype: e })} />;
  }

  render() {
    const { data = {}, loading, quickQuerytype } = this.state;
    const { countStat = {}, echartsdata = {}, topKBuy = {}, topKSell = {} } = data;

    return (
      <div>
        <Row gutter={20}>
          <Col span='12'>
            <SecondHeaderC title='交易笔数&金额' />
            <AmountAndNumber countStat={countStat} loading={loading} />
          </Col>
          <Col span='12'>
            <SecondHeaderC title='流入&流出金额' Right={this.quickQueryButtom()} />
            <InAndOutAmount echartsdata={echartsdata} quickQuerytype={quickQuerytype} loading={loading} />
          </Col>
        </Row>
        <Row gutter={20} style={{ marginTop: '20px' }}>
          <Col span='12'>
            <SecondHeaderC
              title='TOP5买入'
              Left={
                <Tooltip title='回购和现金不参与统计'>
                  <QuestionCircleOutlined style={{ paddingLeft: '7px' }} />
                </Tooltip>
              }
            />
            <Top5Statistics data={topKBuy} loading={loading} />
          </Col>
          <Col span='12'>
            <SecondHeaderC
              title='TOP5卖出'
              Left={
                <Tooltip title='回购和现金不参与统计'>
                  <QuestionCircleOutlined style={{ paddingLeft: '7px' }} />
                </Tooltip>
              }
            />
            <Top5Statistics data={topKSell} loading={loading} />
          </Col>
        </Row>
      </div>
    );
  }
}
